<template>
    <div class="" v-if="state !== 'hidden'">

        <el-form ref="form" :model="form" :label-width="'write' == state ? '115px':'auto'"
                 :class="'write' == state ? 'write-form':'read-form'"
                 :label-position="'write' == state ? 'top':'left'">
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span><span v-if="'write' == state" class="require-text">* </span>账户信息</span>
                    <el-button v-if="'write' == state" style="margin-left: 20px" @click="addAccount" size="mini"
                               type="primary">新增
                    </el-button>
                    <span></span>
                </div>
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-table
                        border
                        :data="form.accounts"
                        style="width: 100%">
                        <el-table-column
                            type="index"
                            key="index"
                            width="50"
                            align="center"
                            label="序号">
                        </el-table-column>
                        <el-table-column
                            prop="accountName"
                            key="accountName"
                            align="center"
                            min-width="170"
                            label="开户名称">
                            <template slot-scope="scope">
                                <el-form-item label-width="0" prop="accountName"
                                              :rules="'write' == state ? {
                                                             required: true,
                                                             message: '请输入开户名称',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, scope.row.accountName, callback)
                                                           }:{}">
                                    <el-input maxlength="50" v-if="'write' == state" v-model="scope.row.accountName" clearable
                                              placeholder="请输入开户名称"></el-input>
                                    <span v-else>{{ scope.row.accountName|filterNull }}</span>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="bankName"
                            key="bankName"
                            align="center"
                            min-width="170"
                            label="开户银行">
                            <template slot-scope="scope">
                                <el-form-item label-width="0" prop="bankName"
                                              :rules="'write' == state ? {
                                                             required: true,
                                                             message: '请输入开户银行',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, scope.row.bankName, callback)
                                                           }:{}">
                                    <el-input maxlength="50" v-if="'write' == state" v-model="scope.row.bankName" clearable
                                              placeholder="请输入开户银行"></el-input>
                                    <span v-else>{{ scope.row.bankName|filterNull }}</span>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="accountNumber"
                            key="accountNumber"
                            align="center"
                            min-width="170"
                            label="银行账户">
                            <template slot-scope="scope">
                                <el-form-item label-width="0" prop="accountNumber"
                                              :rules="'write' == state ? {
                                                             required: true,
                                                             message: '请输入银行账户',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, scope.row.accountNumber, callback)
                                                           }:{}">
                                    <el-input maxlength="21" @input="value=>scope.row.accountNumber=value.replace(/[^\d]/g,'')" v-if="'write' == state" v-model="scope.row.accountNumber" clearable
                                              placeholder="请输入银行账户"></el-input>
                                    <span v-else>{{ scope.row.accountNumber|filterNull }}</span>
                                </el-form-item>

                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="accountStatus"
                            key="accountStatus"
                            align="center"
                            width="125"
                            label="是否为生效账号">
                            <template slot-scope="scope">
                                <el-switch v-if="'write' == state"
                                           active-value="0"
                                           inactive-value="1"
                                           v-model="scope.row.accountStatus">
                                </el-switch>
                                <span
                                    v-else>{{
                                        0 == scope.row.accountStatus ? '是' : 1 == scope.row.accountStatus ? '否' : '--'
                                    }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="'write' == state" label="操作" width="80" align="center"
                                         class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <e-button size="mini" type="text" icon="el-icon-delete"
                                          @click="handleDelete(scope.row, scope.$index)"
                                          >删除
                                </e-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注:" prop="memo"
                                      :rules="('write' == state && '供应商变更'===pageType) ? {
                                                             required: true,
                                                             message: '请填写变更内容',
                                                             trigger: 'blur',
                                                             validator: (rule, value, callback) => validData(rule, form.memo, callback)
                                                           }:{}">
                            <el-input type="textarea" v-if="'write' == state" v-model="form.memo" maxlength="500"
                                      placeholder="请填写变更内容"></el-input>
                            <span v-else>{{ form.memo|filterNull }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="1==form.delStatus">
                        <el-form-item label="删除备注:" prop="delRemark">
                            <el-input type="textarea" v-if="'write' == state" v-model="form.delRemark" maxlength="500"
                                      placeholder="请填写删除备注"></el-input>
                            <span v-else>{{ form.delRemark|filterNull }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="附件上传:" prop="annex">
                            <ImageCommon :disabled="'write' != state" :up-type="2" info="选择附件"
                                         v-model="form.annex"></ImageCommon>
                        </el-form-item>
                    </el-col>

                </el-row>
            </div>

        </el-form>

    </div>
</template>

<script>


export default {
    dicts: [],
    props: {
        value: {
            default: {},
        },
        state: {
            default: "write",
        },
        pageType: {
            default: "",
        },
    },
    computed: {
        form: {
            get() {
                console.log('this.value1', this.value)
                return this.value;
            },
            set(value) {
                this.$emit("input", value);
            },
        },

    },
    data() {
        return {};
    },
    methods: {
        handleDelete(row, index) {
            this.form.accounts.splice(index, 1)

        },
        addAccount() {
            this.form.accounts.push({
                bankName: null,
                accountName: null,
                accountNumber: null,
                accountStatus: '0',
            })
            this.$forceUpdate()
        },
        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            if (rule.required && !value) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },


        async valid() {
            let that = this
            // this.form.workId = this.form.id
            return new Promise((resolve) => {
                if('write'==this.state){
                    this.$refs["form"].validate(valid => {
                        if(that.form.accounts.length>0){
                            resolve(valid);
                        }else {
                            that.$modal.msgError("请填写账户信息")
                            resolve(false)
                        }


                    });
                }else {
                    resolve(true)
                }
            })
        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

::v-deep .read-form .el-form-item__label-wrap,
::v-deep .read-form .el-form-item__content {
    margin-left: 0 !important;
}

.el-descriptions {
    margin: 0 -15px;
}

.el-form-item {
    margin: 15px 0;
    width: 100%;
}

.el-table--small .el-table__cell {
    padding: 5px 0;
}
</style>
